<template>
    <div>
        <Title :title="title"></Title>
        <div ref="left2" style="height: 150px;padding-top: 25px;"></div>
    </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request'
export default {
    data() {
        return {
            title: '设备状态分布',
            empData: []
        }
    },
    methods: {
        loadPie() {
            const piePlot = new Pie(this.$refs.left2, {
  appendPadding: 10,
  data:this.empData,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    type: 'outer',
    content: '{name}{value}个',
      style:{
        fill:'white'
      }
  },
legend: {
  layout: 'horizontal',
  position: 'top',
},
  interactions: [{ type: 'element-active' }],
});

piePlot.render();;

            // setInterval(() => {
            //     piePlot.changeData(this.empData.map((d) => ({ ...d, value: d.value * Math.random() })));
            // }, 1200);
        },
        async getEmpData() {
            let res = await get('/dashboard/queryDeviceOnlineNumber');
            this.empData = res.data;
            console.log(this.empData)
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();
    }
}
</script>
<style scoped></style>